{% extends "layout.html" %}

{% block full_width_content %}
{% if not raw %}
  {% if not raw and session.preview_class %}
    <div class="bg-red-500 text-white text-sm font-bold px-4 py-3" data-cy="preview_class_banner" role="alert">
        <div class="text-center center-text">{{_('previewing_class').format(class_name=session.preview_class["name"])}} <a data-cy="exit_preview_class_banner" class="text-white" href="/for-teachers/clear-preview-class">{{_('exit_preview_mode')}}</a></div>
    </div>
  {% endif %}
{% if customizations and customizations["teachers_adventure"] %}
  <div class="bg-red-500 text-white text-sm font-bold px-4 py-3" data-cy="preview_adventure_banner" role="alert">
      <div class="text-center center-text">{{_('previewing_adventure')}}
        {% if initial_adventure.author == username %}
          <a class="text-white" href="/for-teachers/customize-adventure/{{initial_adventure.id}}">{{_('edit_adventure')}}</a>
        {% else %}
          <a class="text-white" href="/public-adventures">{{_('public_adventures')}}</a>
        {% endif %}
      </div>
  </div>
{% endif %}
<div id="level_header" class="bg-blue-200">
  <div class="ltr:pl-8 rtl:pr-8 py-2 flex gap-2 px-4 items-center justify-between w-full max-w-screen-2xl mx-auto">
    <div class="dropdown relative">
      <button class="white-btn px-4 rounded inline-flex items-center gap-2 text-xl" data-cy="dropdown_level_button"
        onclick="$('#level_dropdown').slideToggle('medium');">
        <span>{{ _('level_title') }} {{ level_nr }}
          &nbsp;
          {% if assignment_nr %} · {{ _('step_title') }} {{ assignment_nr }} {% endif %}</span>
        <svg id="level_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
        </svg>
      </button>
      <div class="dropdown-menu dropdown-blue z-30 min-w-full" id="level_dropdown"
        style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;"
        _="on mutation of @style
            set arrow to #level_arrow
            if *display == 'none'
                remove .rotate-180 from arrow
            else if not arrow.classList.contains('rotate-180')
                add .rotate-180 to arrow
            end">
          {% set dropdown_levels = customizations["available_levels"] if customizations["teachers_adventure"] else range(1, max_level + 1) %}
          {% for dropdown_level in dropdown_levels %}
            <button id="level_button_{{ dropdown_level }}" data-cy="level_button_{{ dropdown_level }}" class="flex justify-between items-center gap-2 px-2 py-2 border-b border-dashed border-blue-500
            {% if dropdown_level == level %}bg-white{% elif dropdown_level not in customizations['available_levels'] and not specific_adventure %}bg-gray-400 tooltip{% else %}hover:bg-blue-100 bg-blue-200c{% endif %}"
            {% if (dropdown_level == level or dropdown_level not in customizations['available_levels']) and not specific_adventure %}disabled{% endif %}
            style="width: 100%;"
            _="on click hedyApp.goToLevel({{dropdown_level}})">
              {% if not specific_adventure %}
              <div class="{% if dropdown_level in customizations['available_levels'] %}hidden{% endif %} text-center opacity-0 hover:opacity-100 duration-300 absolute inset-0 z-10 items-top">
                <span class="tooltiptext text-xs font-medium absolute rounded shadow-lg !fixed p-2" style="inset: auto; margin-left: -90px; margin-top: -30px; color:black; ">
                  {{ _('tooltip_level_locked') }}
                </span>
              </div>
              {% endif %}
              <div class="flex-grow h-min min-w-80" tabindex=0>
                  {{ _('level_title') }} {{ dropdown_level }}
              </div>
            </button>
          {% endfor %}
      </div>
    </div>
    <div class="flex-1">
      <div id="program_name_container" class="overflow-hidden flex-1 flex border border-blue-400 ltr:divide-x rtl:divide-x-reverse divide-blue-400 rounded md:mx-16 items-center">
        <input id="program_name" type="text" class="outline-0 text-2xl font-light text-blue-500 flex-1 bg-transparent focus:bg-blue-100 border-0 px-4 flex-1 h-full" value="{{initial_adventure.save_name}}">
        <button id="share_program_button" class="h-full hover:bg-blue-100" title="{{_('share_your_program')}}">
          <span class="fa-solid fa-arrow-up-from-bracket text-2xl p-2 px-4 w-14 text-blue-500"></span>
        </button>
        {% if current_user_is_in_class %}
        <button id="hand_in_button" class="h-full hover:bg-blue-100" title="{{_('hand_in_exercise')}}">
          <span class="fa-regular fa-paper-plane text-2xl p-2 px-4 w-14 text-blue-500"></span>
        </button>
        {% endif %}
      </div>
    </div>
    {% if not hide_cheatsheet and cheatsheet %}
    <div class="dropdown relative">
      <button class="green-btn font-semibold rounded inline-flex items-center gap-2 mr-2" id="dropdown_cheatsheet_button"
        onclick="$('#cheatsheet_dropdown').slideToggle('medium');">
        <span>{{ "🤔" }}</span>
        <svg id="cheatsheet_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
        </svg>
      </button>
      <div class="dropdown-menu dropdown-green z-30 mt-2" id="cheatsheet_dropdown"
        style="display: none; padding: 0px !important;"
        _="on mutation of @style
            set arrow to #cheatsheet_arrow
            if *display == 'none'
                remove .rotate-180 from arrow
            else if not arrow.classList.contains('rotate-180')
                add .rotate-180 to arrow
            end">
        <h2 class="px-2 py-6">{{_('cheatsheet_title')}}</h2>
        {% for example in cheatsheet %}
        <div class="flex justify-between items-center gap-4 px-4 py-8 border-t border-dashed border-green-500">
          <div class="flex-grow h-min min-w-80" tabindex=0>
            {{ example.explanation|commonmark }}
          </div>
          <div class="flex-none">
            <button class="yellow-btn tiny-btn" id="try_button{{ loop.index }}"
              onclick='hedyApp.tryPaletteCode({{example.demo_code|tojson}});'>
              <span class="rtl:hidden">⇥</span>
              <span class="ltr:hidden">⇤</span>
            </button>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% if get_syntax_language(g.lang) != "en" and (not customizations or 'hide_keyword_switcher' not in customizations['other_settings']) %}
     {{ render_partial('htmx-language-switch-button.html', lang_switch_table=lang_switch_table) }}
    {% endif %}
  </div> <!-- container -->
</div><!-- blue bar -->
{% endif %}

<div class="w-full max-w-screen-2xl mx-auto" id="code_content_container"
  data-kwlang="{{ current_language().lang }}" data-level="{{ level }}">
{% block levelbody %}{% endblock %}
</div>

{% include 'incl/share-modal.html' %}
{% include 'incl/hand-in-modal.html' %}
{% if HOC_tracking_pixel %}
  <img src="https://code.org/api/hour/begin_hedy_text.png" id="tracking_pixel" alt="Tracking Pixel - Hour of code" height="1" width="1">
{% endif %}
{% endblock %}
